Day23 讀取網路3D模型

蘋果在開發者平台提供了許多範例模型，以供開發者測試使用：

https://developer.apple.com/augmented-reality/quick-look/

我們可以利用這些放在網路上的模型，來測試透過網路讀取。

首先，隨便挑選一個模型的網址，轉換成URL物件：

private let url = URL(string: "https://developer.apple.com/augmented-reality/quick-look/models/retrotv/tv_retro.usdz")!

使用Model3D，參數輸入URL物件：

Model3D(url: url) { model in
    model
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200, height: 200)
} placeholder: {
}

Model3D會回傳model物件回來，透過這個物件就等於已經將模型下載下來，可以直接使用，而使用方式就跟使用Image類似，可以設定大小或者符合比例等。

最後在placeholder內放入ProgressView讀取元件：

Model3D(url: url) { model in
    model
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200, height: 200)
} placeholder: {
    ProgressView()
}

呈現如圖示：

而以往的留白都是針對水平方向或者垂直方向的padding，在空間運算內有提供3D方向的padding3D，例如：

Model3D(url: url) { model in
    model
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200, height: 200)
        .padding3D(.back, 100)
                
} placeholder: {
    ProgressView()
}

完整程式碼：

import SwiftUI
import RealityKit
import RealityKitContent

struct ContentView: View {
    
    @State var depth: CGFloat = 0
    
    private let url = URL(string: "https://developer.apple.com/augmented-reality/quick-look/models/retrotv/tv_retro.usdz")!
    
    var body: some View {
        VStack {
            Slider(value: $depth, in: 0...500) {
                Text("深度")
            }
            
            Model3D(url: url) { model in
                model
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 200, height: 200)
                    .padding3D(.back, depth)
                
            } placeholder: {
                ProgressView()
            }
        }
        .padding()
    }
}

呈現如圖示：

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day23 [完]